import React, { useCallback } from 'react'
import { connect } from 'react-redux'
import { RecordMode, NotifyType } from '../../common/enums'
import { getPlanAllPlansSelector, getPlanActivePlanIdSelector } from '../../selectors/baseSelector'
import { genPlanSetActivePlan, genPlanSetActivePlanSuites, genPlanAddPlan } from '../../actions/home'
import { SingleSelectableList } from '../layout/singleSelectableList'
import { genTempId } from '../../source/genTempId'
import basicStyle from '../common/basic.scss'
import { EmptyElement } from '../common/emptyElement'
import { Input } from '../common/Input'
import { EnvSelector } from '../common/envSelector'
import { usePlanFilter } from './usePlanFilter'
import { ColHeader } from '../common/colHeader'
import { getPlanEnvName } from '../../source/getPlanEnvName'
import { getAllSuitesOfPlan } from '../../source/getData'
import { notify } from '../../source/notify'

const maStateToProps = state => {
    return {
        activePlanId: getPlanActivePlanIdSelector(state),
        allPlans: getPlanAllPlansSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setActivePlan: plan => dispatch(genPlanSetActivePlan(plan)),
        setActivePlanSuites: suites => dispatch(genPlanSetActivePlanSuites(suites)),
        addPlan: plan => dispatch(genPlanAddPlan(plan)),
    }
}

export const PlanList = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { activePlanId, setActivePlan, allPlans, addPlan } = props

    const onAdd = useCallback(() => {
        const toAdd = { id: genTempId(), mode: RecordMode.add, title: '', env: '', baseEnv: '', suites: [] }
        addPlan(toAdd)
        setActivePlan(toAdd)
    }, [])

    const wrapSetActivePlan = useCallback(plan => {
        setActivePlan(plan)
        // getAllSuitesOfPlan(plan.id).then(suites => {

        // }).catch(err => {
        //     notify(NotifyType.error, err)
        // })
    }, [setActivePlan])

    const getTitle = useCallback(item => item.mode === RecordMode.add ? `* NOT SAVED` : item.title, [])
    const getEnv = useCallback(item => getPlanEnvName(item), [])

    const { filter, onChangeFilterEnv, onChangeFilterTitle, visiblePlans } = usePlanFilter({ dataSource: allPlans })

    return (
        <React.Fragment>
            <ColHeader title='所有任务：' />
            <div className={basicStyle.actions}>
                <button onClick={onAdd}>新增</button>
            </div>
            <div>
                <Input className='width_130px' placeholder='筛选标题' value={filter.title} onChange={onChangeFilterTitle} readOnly={false} />
                <EnvSelector showNoLimitItem={true} placeholder='筛选基准环境' envName={filter.env} onSelectItem={onChangeFilterEnv} readOnly={false} />
            </div>
            {visiblePlans.length
                ? <SingleSelectableList activeValue={activePlanId} dataSource={visiblePlans}
                    getItemValue={item => item.id} getItemTitle={getTitle} getItemTitle2={getEnv}
                    onSelectItem={wrapSetActivePlan} />
                : <EmptyElement />}
        </React.Fragment>)
})